<style>
    .tab-container {
        padding: 20px;
        border-bottom: 1px solid #ececec;
        height: 25px;
    }

    .tab-item {
        font-size: 20px;
        float: left;
        margin-right: 40px;
        cursor: pointer;
    }

    .tab-seleted {
        color: #0d7eff;
    }

    .topic-item {
        padding: 10px 10px 0px 10px;
        border-bottom: 1px #ececec solid;
    }

    .topic-item .subject {
        font-size: 18px;
        padding-top: 10px;
        font-weight: 600;
        font-synthesis: style;
        line-height: 1.6;
        color: #1a1a1a;
        margin-top: -4px;
        margin-bottom: -4px;
    }

    .topic-item .pushtime {
        color: #666;
        padding-left: 20px;
        position: relative;
    }

    .topic-item .topic-content {
        font-size: 16px;
        color: #222;
        line-height: 1.67;
        padding: 10px;
        word-wrap: break-word;
        word-break: break-all;
    }

    .topic-content pre {
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
        *white-space: normal !important;
    }

    .content-more {
        padding: 0;
        margin-left: 4px;
        color: #0d7eff;
        cursor: pointer;
    }

    .content-more:hover {
        color: #666;
    }

    .footer {
        padding: 5px;
        border-top: 1px #ececec dotted;
        position: relative;
        background-color: rgba(236, 236, 236, 0.3);
        height: 40px;
    }

    .footer div {
        float: left;
        margin-right: 10px;
    }

    .footer .oppose {
        background-color: #e6f2ff;
        color: #0e7efe;
        padding: 10px 20px 10px 20px;
        font-size: 14px;
        cursor: pointer;
    }

    .oppose:hover {
        background-color: #ced1de;
    }

    .footer .comments {
        padding: 10px;
        font-size: 16px;
        color: #666;
    }

    .comments icon {
        font-size: 20px;
    }

    .comments click {
        font-size: 16px;
    }

    .footer .packup {
        position: absolute;
        top: 20px;
        right: 10px;
        display: none;
    }

    .comment-layout {
        min-height: 100px;
        margin: 10px 20px 10px 20px;
        position: relative;
        display: none;
    }

    .comment-layout .topic {
        font-size: 16px;
        font-weight: 600;
        font-synthesis: style;
        padding: 15px;
        border-bottom: 1px #ececec solid;
    }

    click {
        font-size: 16px;
    }

    .footer .packup click {
        font-size: 18px;
        color: #ff0000;
    }

    .comment-layout .right {
        position: absolute;
        right: 20px;
        top: 15px;
        color: #888;
        display: inline-flex;
        align-items: center;
    }

    .comment-input {
        padding: 10px;
    }

    .comment-input textarea {
        border: 1px #888 solid;
        border-radius: 5px;
        padding: 10px;
        line-height: 1.6;
        min-height: 100px;
    }

    .comment-input button {
        margin-left: 20px;
        margin-top: -20px;
    }

    .comment-item {
        padding: 10px;
    }

    .comment-item .createtime {
        color: #888;
        position: relative;
    }

    .comment-item .content {
        color: #000;
        padding-left: 20px;
        line-height: 1.6;
        font-size: 16px;
        margin-top: 10px;
        word-wrap: break-word;
        word-break: break-all;
    }

    .content pre {
        word-wrap: break-word;
        word-break: break-all;
    }

    .comment-item .agree {
        padding-left: 25px;
        color: #656f85;
        padding-top: 10px;
    }

    .comment-item .agree icon {
        font-size: 20px;
    }

    .comment-item .agree span {
        font-size: 16px;
        font-weight: bold;
    }

    .comment-footer {
        border-top: 1px solid #ececec;
        border-bottom: 1px solid #ececec;
        padding: 10px;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        color: #666;
    }

    #float-footer {
        position: fixed;
        bottom: -5px;
        left: 0px;
        width: 100%;
        display: none;
    }

    #float-footer .footer {
        height: 40px;
        background-color: #f8f8f8;
        margin: 0 auto;
    }

    #float-footer .float-subject {
        color: #0e7efe;
        font-size: 16px;
    }

    .loadOver {
        text-align: center;
        padding: 10px;
        color: #999;
        font-size: 16px;
    }

    .key-name {
        color: #0056fe;
        cursor: pointer;
    }

    .key-organization {
        color: #ff5600;
        cursor: pointer;
    }

    .key-place {
        color: #1c993b;
        cursor: pointer;
    }

    .key-name:hover, .key-organization:hover, .key-place:hover {
        background-color: #009900;
        color: #fff;
    }

    #baike-entity {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 500px;
        height: 300px;
        display: none;
        border: solid 1px #bcbcbc !important;
        -webkit-box-shadow: 0 3px 3px rgba(26, 26, 26, .3);
        box-shadow: 0 3px 3px rgba(26, 26, 26, .3);
        background-color: #fff;
    }

    #baike-entity .inner-content {
        position: relative;
        height: 100%;
    }

    .inner-content .close {
        font-size: 20px;
        width: 25px;
        height: 25px;
        color: #ff0000;
        position: absolute;
        top: 5px;
        right: 5px;
        text-align: center;
        line-height: 25px;
    }

    .baike-entity-item {
        padding: 10px;
        border-bottom: solid 1px #bcbcbc;
        font-size: 18px;
    }

    .inner-content .baike-entity-content {
        padding: 10px;
        font-size: 16px;
        line-height: 1.5;
        overflow: auto;
        text-indent: 40px;
        height: 100%;
    }

    .baike-entity-footer {
        position: absolute;
        bottom: 0px;
        left: 0px;
        padding: 10px;
        text-align: right;
        width: 100%;
        box-sizing: border-box;
        border-top: solid 1px #ececec;
    }

    .topic-image {
        float: left;
        width: 180px;
        height: 115px;
        padding-top:0px !important;
        line-height: 1.67;
        padding: 10px;
        word-wrap: break-word;
        word-break: break-all;
    }

    .topic-image img {
        width: 180px;
        height: 115px;
        padding: 1px;
    }
    .topic-tag {
        padding:10px;
        margin-bottom:8px;
    }
    .-tag{
        background-color: rgba(10, 55, 254, 0.6);
        padding:5px;
        color:#fff;
        margin-left:8px;
        margin-bottom:8px;
        border-radius: 4px;
        padding-left:10px;
        padding-right:10px;
        float:left;
        border-bottom:solid 2px #ff5600;
        position: relative;
    }
    .-tag-dot{
        position: absolute;
        right:2px;
        top:2px;
        width:4px;
        height:4px;
        border-radius: 50%;
        background-color: #00ff80;
    }
    .tag-info{
        color: #0056fe;
    }
    .right {
        position: absolute;
        top:0px;
        right:5px;
    }
</style>
<div class="tab-container">
    <div class="tab-item tab-seleted" cmd="new">新主题</div>
    <div class="tab-item" cmd="hot">主题热榜</div>
</div>
<div style="clear:both;"></div>
<div id="topicListLayout" style="position: relative;">

</div>
<div id="baike-entity" class="-box">
    <div class="inner-content">
        <div class="baike-entity-item"></div>
        <icon class="close icon-cuowu" onclick="closeBaikeEntity()"></icon>
        <div class="baike-entity-content">

        </div>
        <div class="baike-entity-footer">
            *词条内容由 <a href="https://baike.baidu.com" target="_blank" style="color:blue">百度百科</a> 提供
            <button onclick="openBaikeItem(this)">打开词条</button>
        </div>
    </div>
</div>
<div id="float-footer">
    <div topic="" class="footer -box">
        <div class="oppose" onclick="_agreeTopic()" id="float-agreeBox">
            <svg class="Zi Zi--TriangleUp VoteButton-TriangleUp" fill="currentColor" viewBox="0 0 24 24" width="10"
                 height="10">
                <path d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z"
                      fill-rule="evenodd"></path>
            </svg>
            赞同 <span id="float-agree"></span>
        </div>
        <div class="oppose" onclick="_opposeTopic()" id="float-opposeBox">
            <svg class="Zi Zi--TriangleDown" fill="currentColor" viewBox="0 0 24 24" width="10" height="10">
                <path d="M20.044 3H3.956C2.876 3 2 3.517 2 4.9c0 .326.087.533.236.896L10.216 19c.355.571.87 1.143 1.784 1.143s1.429-.572 1.784-1.143l7.98-13.204c.149-.363.236-.57.236-.896 0-1.386-.876-1.9-1.956-1.9z"
                      fill-rule="evenodd"></path>
            </svg>
            <span id="float-oppose"></span>
        </div>
        <div class="comments">
            <click onclick="showComment('#rowkey',this)">
                <icon class="icon-pinglun"></icon>
                <span class="comment-count"><span id="float-comment-count">#comment</span> 条评论</span>
                <span class="packup-comment" style="display:none">收起评论</span>
            </click>
        </div>
        <div class="packup">
            <span class="float-subject"></span>
            <click onclick="_packupContent()">收起</click>
        </div>
    </div>
</div>
<template id="one-image-item">
    <div class="topic-item" id="#rowkey" istop="#istop">
        <div class="subject">
            <!--<icon class="icon-quxiaozhiding" style="font-size:25px;color: #ff0000;"></icon>-->
            <img src="./images/top2.png" style="width:35px;vertical-align:middle;">
            <icon class="icon-home" style="font-size:20px;"></icon>
            #subject
        </div>
        <div class="pushtime">#pushtime
            <div class="right">情感指数：<span class="sentiment">-</span><span class="sentiment_text">-</span></div>
        </div>
        <div class="topic-image-content topic-content">#content</div>
        <div style="clear:both;"></div>
        <div class="topic-image"></div>
        <div style="clear:both;"></div>
        <div class="topic-tag"></div>
        <div style="clear:both;"></div>
        <div class="footer">
            <div class="oppose" name="agreeBox" onclick="agreeTopic('#rowkey')">
                <svg class="Zi Zi--TriangleUp VoteButton-TriangleUp" fill="currentColor" viewBox="0 0 24 24" width="10"
                     height="10">
                    <path d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z"
                          fill-rule="evenodd"></path>
                </svg>
                赞同 <span name="agree">#agree</span>
            </div>
            <div class="oppose" name="opposeBox" onclick="opposeTopic('#rowkey')">
                <svg class="Zi Zi--TriangleDown" fill="currentColor" viewBox="0 0 24 24" width="10" height="10">
                    <path d="M20.044 3H3.956C2.876 3 2 3.517 2 4.9c0 .326.087.533.236.896L10.216 19c.355.571.87 1.143 1.784 1.143s1.429-.572 1.784-1.143l7.98-13.204c.149-.363.236-.57.236-.896 0-1.386-.876-1.9-1.956-1.9z"
                          fill-rule="evenodd"></path>
                </svg>
                <span name="oppose">#oppose</span>
            </div>
            <div class="oppose" name="topBox" onclick="setTop('#rowkey')">
                <icon class="icon-zhiding1"></icon>
                置顶
            </div>
            <div class="oppose" name="removeBox" onclick="removeTopic('#rowkey')">
                <icon class="icon-shanchu"></icon>
                删除
            </div>
            <div class="comments">
                <click onclick="showComment('#rowkey',this)" class="showCommentButton">
                    <icon class="icon-pinglun"></icon>
                    <span class="comment-count"><span name="comment-count-#rowkey">#comment</span> 条评论</span>
                    <span class="packup-comment" style="display:none">收起评论</span>
                </click>
            </div>
            <div class="packup">
                <click onclick="packupContent('#rowkey')">收起</click>
            </div>
        </div>
        <div style="clear:both;"></div>
        <div id="comment-#rowkey" class="comment-layout -box">
            <div class="topic">
                <span name="comment-count-#rowkey"></span> 条评论
                <div class="right">
                    <svg class="Zi Zi--Switch Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em"
                         height="1.2em">
                        <path d="M13.004 7V4.232c0-.405.35-.733.781-.733.183 0 .36.06.501.17l6.437 5.033c.331.26.376.722.1 1.033a.803.803 0 0 1-.601.264H2.75a.75.75 0 0 1-.75-.75V7.75A.75.75 0 0 1 2.75 7h10.254zm-1.997 9.999v2.768c0 .405-.35.733-.782.733a.814.814 0 0 1-.5-.17l-6.437-5.034a.702.702 0 0 1-.1-1.032.803.803 0 0 1 .6-.264H21.25a.75.75 0 0 1 .75.75v1.499a.75.75 0 0 1-.75.75H11.007z"
                              fill-rule="evenodd"></path>
                    </svg>
                    <click>切换为时间顺序</click>
                </div>
            </div>
            <div class="comment-list" id="comment-list-#rowkey"></div>
            <div class="comment-footer" id="comment-footer-#rowkey">

            </div>
            <div class="comment-input">
                <textarea id="comment-content-#rowkey" onkeypress="resetThisHeight()" placeholder="写下你的评论..."
                          style="width:80%;"></textarea>
                <button onclick="pushComment('#rowkey')">发布</button>
            </div>
        </div>
    </div>
    <div style="clear:both;"></div>
</template>
<template id="topic-item">
    <div class="topic-item" id="#rowkey" istop="#istop">
        <div class="subject">
            <!--<icon class="icon-quxiaozhiding" style="font-size:25px;color: #ff0000;"></icon>-->
            <img src="./images/top2.png" style="width:35px;vertical-align:middle;">
            <icon class="icon-home" style="font-size:20px;"></icon>
            #subject
        </div>
        <div class="pushtime">#pushtime
        <div class="right">情感指数：<span class="sentiment">-</span><span class="sentiment_text">-</span></div>
        </div>
        <div class="topic-content">#content</div>
        <div style="clear:both;"></div>
        <div class="topic-tag"></div>
        <div style="clear:both;"></div>
        <div class="footer">
            <div class="oppose" name="agreeBox" onclick="agreeTopic('#rowkey')">
                <svg class="Zi Zi--TriangleUp VoteButton-TriangleUp" fill="currentColor" viewBox="0 0 24 24" width="10"
                     height="10">
                    <path d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z"
                          fill-rule="evenodd"></path>
                </svg>
                赞同 <span name="agree">#agree</span>
            </div>
            <div class="oppose" name="opposeBox" onclick="opposeTopic('#rowkey')">
                <svg class="Zi Zi--TriangleDown" fill="currentColor" viewBox="0 0 24 24" width="10" height="10">
                    <path d="M20.044 3H3.956C2.876 3 2 3.517 2 4.9c0 .326.087.533.236.896L10.216 19c.355.571.87 1.143 1.784 1.143s1.429-.572 1.784-1.143l7.98-13.204c.149-.363.236-.57.236-.896 0-1.386-.876-1.9-1.956-1.9z"
                          fill-rule="evenodd"></path>
                </svg>
                <span name="oppose">#oppose</span>
            </div>
            <div class="oppose" name="topBox" onclick="setTop('#rowkey')">
                <icon class="icon-zhiding1"></icon>
                置顶
            </div>
            <div class="oppose" name="removeBox" onclick="removeTopic('#rowkey')">
                <icon class="icon-shanchu"></icon>
                删除
            </div>
            <div class="comments">
                <click onclick="showComment('#rowkey',this)" class="showCommentButton">
                    <icon class="icon-pinglun"></icon>
                    <span class="comment-count"><span name="comment-count-#rowkey">#comment</span> 条评论</span>
                    <span class="packup-comment" style="display:none">收起评论</span>
                </click>
            </div>
            <div class="packup">
                <click onclick="packupContent('#rowkey')">收起</click>
            </div>
        </div>
        <div style="clear:both;"></div>
        <div id="comment-#rowkey" class="comment-layout -box">
            <div class="topic">
                <span name="comment-count-#rowkey"></span> 条评论
                <div class="right">
                    <svg class="Zi Zi--Switch Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em"
                         height="1.2em">
                        <path d="M13.004 7V4.232c0-.405.35-.733.781-.733.183 0 .36.06.501.17l6.437 5.033c.331.26.376.722.1 1.033a.803.803 0 0 1-.601.264H2.75a.75.75 0 0 1-.75-.75V7.75A.75.75 0 0 1 2.75 7h10.254zm-1.997 9.999v2.768c0 .405-.35.733-.782.733a.814.814 0 0 1-.5-.17l-6.437-5.034a.702.702 0 0 1-.1-1.032.803.803 0 0 1 .6-.264H21.25a.75.75 0 0 1 .75.75v1.499a.75.75 0 0 1-.75.75H11.007z"
                              fill-rule="evenodd"></path>
                    </svg>
                    <click>切换为时间顺序</click>
                </div>
            </div>
            <div class="comment-list" id="comment-list-#rowkey"></div>
            <div class="comment-footer" id="comment-footer-#rowkey">

            </div>
            <div class="comment-input">
                <textarea id="comment-content-#rowkey" onkeypress="resetThisHeight()" placeholder="写下你的评论..."
                          style="width:80%;"></textarea>
                <button onclick="pushComment('#rowkey')">发布</button>
            </div>
        </div>
    </div>
</template>
<script>
    var currentTab = "new";
    $(".tab-item").click(function () {
        $(".tab-item").removeClass("tab-seleted");
        $(this).addClass("tab-seleted");
        var cmd = $(this).attr("cmd");
        currentTab = cmd;
        loadOver = false;
        pageno = 1;
        loadTopicList(cmd);
    });
    $("#topicListLayout").click(function () {
        event.stopPropagation();
        closeBaikeEntity();
    });
    var pageno = 1;
    var pagesize = 50;
    var topics = [];

    function resetThisHeight() {
        var target = $(event.target);
        var content = target.val().split("\n");
        console.log(content.length)
        var h = content.length * 25;
        target.css({
            height: h
        })
    }

    function pushComment(rowkey) {
        var content = $("#comment-content-" + rowkey).val();
        if (content == "") {
            alert("评论内容为空");
            return;
        }
        showDialog('正在提交评论内容...');
        var vo = {topic: rowkey, content: content};
        $.ajax({
            url: '/topic/add/guest_comment',
            type: "POST",
            async: true,
            dataType: "json",
            data: {vo: jSONStringify(vo)},
            success: function (res) {
                hideDialog();
                if (res.errorCode == 0) {
                    info('评论主题内容成功.');
                    updateTopic(rowkey, {comment: 'increment'});
                    loadComment(rowkey, 1);
                    $("#comment-content-" + rowkey).val("");
                } else {
                    error('评论主题内容失败');
                }
            },
            error: function (err) {
                hideDialog();
                error("评论主题内容失败：" + err);
            }
        });
    }

    function agreeTopic(topic) {
        var item = getTopic(topic);
        if (item.agreeClick) {
            var div = $("#" + topic);
            updateTopic(topic, {agree: 'decrement'}, false);
            item.agree -= 1;
            item.agreeClick = false;
            div.find("span[name='agree']").html(item.agree);
            div.find("div[name='agreeBox']").css({
                backgroundColor: '#e6f2ff',
                color: '#0e7efe'
            });
            $("#float-agree").html(item.agree);
            $("#float-agreeBox").css({
                backgroundColor: '#e6f2ff',
                color: '#0e7efe'
            });
        } else {
            updateTopic(topic, {agree: 'increment'}, false, function (res) {
                if (res.errorCode == 0) {
                    var div = $("#" + res.rowkey);
                    var item = getTopic(res.rowkey);
                    item.agree += 1;

                    item.agreeClick = true;
                    div.find("span[name='agree']").html(item.agree);
                    div.find("div[name='agreeBox']").css({
                        backgroundColor: '#0d7eff',
                        color: '#fff'
                    });
                    $("#float-agree").html(item.agree);
                    $("#float-agreeBox").css({
                        backgroundColor: '#0d7eff',
                        color: '#fff'
                    });
                    if (item.opposeClick) {
                        updateTopic(topic, {oppose: 'decrement'}, false);
                        item.oppose -= 1;
                        item.opposeClick = false;
                        div.find("span[name='oppose']").html(item.oppose);
                        div.find("div[name='opposeBox']").css({
                            backgroundColor: '#e6f2ff',
                            color: '#0e7efe'
                        });
                        $("#float-oppose").html(item.oppose);
                        $("#float-opposeBox").css({
                            backgroundColor: '#e6f2ff',
                            color: '#0e7efe'
                        });
                    }
                }
            });
        }
    }

    function opposeTopic(topic) {
        var item = getTopic(topic);
        if (item.opposeClick) {
            var div = $("#" + topic);
            updateTopic(topic, {oppose: 'decrement'}, false);
            item.oppose -= 1;
            item.opposeClick = false;
            div.find("span[name='oppose']").html(item.oppose);
            div.find("div[name='opposeBox']").css({
                backgroundColor: '#e6f2ff',
                color: '#0e7efe'
            });
            $("#float-oppose").html(item.oppose);
            $("#float-opposeBox").css({
                backgroundColor: '#e6f2ff',
                color: '#0e7efe'
            });
        } else {
            updateTopic(topic, {oppose: 'increment'}, false, function (res) {
                if (res.errorCode == 0) {
                    var div = $("#" + res.rowkey);
                    var item = getTopic(res.rowkey);
                    item.oppose += 1;

                    item.opposeClick = true;
                    div.find("span[name='oppose']").html(item.oppose);
                    div.find("div[name='opposeBox']").css({
                        backgroundColor: '#0d7eff',
                        color: '#fff'
                    });
                    $("#float-oppose").html(item.oppose);
                    $("#float-opposeBox").css({
                        backgroundColor: '#0d7eff',
                        color: '#fff'
                    });
                    if (item.agreeClick) {
                        updateTopic(topic, {agree: 'decrement'}, false);
                        item.agree -= 1;
                        item.agreeClick = false;
                        div.find("span[name='agree']").html(item.agree);
                        div.find("div[name='agreeBox']").css({
                            backgroundColor: '#e6f2ff',
                            color: '#0e7efe'
                        });
                        $("#float-agree").html(item.agree);
                        $("#float-agreeBox").css({
                            backgroundColor: '#e6f2ff',
                            color: '#0e7efe'
                        });
                    }
                }
            });
        }
    }

    function updateTopic(topic, vo, uptime, callback) {
        uptime = uptime == null ? true : false;
        $.ajax({
            url: '/topic/add/guest_topic',
            type: "POST",
            async: true,
            dataType: "json",
            data: {vo: jSONStringify(vo), rowkey: topic, uptime: uptime},
            success: function (res) {
                if (callback != null)
                    callback(res);
            },
            error: function (err) {

            }
        });
    }

    function setTop(topic) {
        var div = $("#" + topic);
        var istop = parseInt(div.attr("istop"));
        if (istop == 0) {
            updateTopic(topic, {top: 100}, false, function () {
                div.remove();
                div.attr('istop', '100');
                div.find(".subject img").show();
                div.find('div[name="topBox"]').html('<icon class="icon-quxiaozhiding1"></icon>取消置顶');
                $("#topicListLayout").prepend(div);
            });
        } else if (istop == 100) {
            updateTopic(topic, {top: 0}, false, function () {
                div.attr('istop', '0');
                div.find(".subject img").hide();
                div.find('div[name="topBox"]').html('<icon class="icon-zhiding1"></icon>置顶');
            });
        }
    }

    function removeTopic(topic) {
        if (!confirm("确定要删除吗？"))
            return;
        $.ajax({
            url: '/topic/remove/guest_topic',
            type: "GET",
            async: true,
            dataType: "json",
            data: {rowkey: topic},
            success: function (res) {
                if (res.errorCode == 0) {
                    $("#" + topic).remove();
                } else {
                    alert(res.message);
                }
            },
            error: function (err) {

            }
        });
    }

    function updateComment(rowkey, vo, uptime, callback) {
        uptime = uptime == null ? true : false;
        $.ajax({
            url: '/topic/add/guest_comment',
            type: "POST",
            async: true,
            dataType: "json",
            data: {vo: jSONStringify(vo), rowkey: rowkey, uptime: uptime},
            success: function (res) {
                if (callback != null)
                    callback(res);
            },
            error: function (err) {

            }
        });
    }

    function loadComment(rowkey, pageno) {
        if (pageno == null)
            pageno = 1;
        var param = {topic: rowkey}
        $.ajax({
            url: '/topic/list/guest_comment',
            type: "GET",
            async: true,
            dataType: "json",
            data: {pageno: pageno, pagesize: 20, param: jSONStringify(param),sentiment:'content'},
            success: function (res) {
                if (res.errorCode == 0) {
                    $("span[name='comment-count-" + rowkey + "']").html(res.total);
                    var items = res.items;
                    var div = $("#comment-list-" + rowkey);
                    div.empty();
                    var rowNum = res.total-((pageno-1)*20);
                    for (var i = 0; i < items.length; i++) {
                        var item = items[i];
                        var buf = new StringBuffer();
                        var ct = new Date(item.createtime).format("yyyy-MM-dd hh:mm");
                        buf.append('<div class="comment-item">');
                        buf.append('<div class="createtime" style=""><icon class="icon-home" style="font-size:20px;"></icon> ' + ct );
                        buf.append('<div class="right" style="margin-top:-10px;">');
                        buf.append('情感指数：');
                        if(item.sentiment<0.0005||item.sentiment==0.0){
                            buf.append('-')
                        }else if(item.sentiment>0.5){
                            buf.append('<span class="comment-sentiment" style="color:#ff0000;">'+item.sentiment.toFixed(3)+'</span>');
                            buf.append(' <span class="comment-sentiment-text" style="color:#ff0000;">(正面)</span>  ');
                        }else if(item.sentiment<0.5){
                            buf.append('<span class="comment-sentiment" style="color:#009900;">'+item.sentiment.toFixed(3)+'</span>');
                            buf.append(' <span class="comment-sentiment-text" style="color:#009900;">(负面)</span>  ');
                        }else{
                            buf.append('<span class="comment-sentiment" style="color:#999;">'+item.sentiment.toFixed(3)+'</span>');
                            buf.append(' <span class="comment-sentiment-text" style="color:#999;">(中立)</span>  ');
                        }

                        buf.append('&nbsp;&nbsp;<span style="border-bottom: solid 1px #0096ff;font-size:18px;color:#0096ff;">'+rowNum+'楼</span>');
                        buf.append('</div>')
                        buf.append('</div>');
                        buf.append('<div class="content">');
                        rowNum--;
                        var content = delHtmlTag(item.content);
                        content = content.replaceAll("\n", "<br/>");
                        buf.append(content);
                        buf.append('</div>');
                        buf.append('<div class="agree" style="border-bottom: dotted 1px #bcbcbc;padding:10px;">');
                        buf.append('<click id="' + item.id + '" topic="' + item.topic + '" agree="' + item.agree + '" agreeClick="false" onclick="agreeComment(this)">');
                        buf.append('<icon class="icon-zan">&nbsp;');
                        if (item.agree > 0) {
                            buf.append('<span>' + item.agree + '</span>');
                        } else {
                            buf.append('<span></span>');
                        }
                        buf.append('</icon></click></div>');
                        buf.append('</div>');
                        div.append(buf.toString());
                    }
                    buildPagepart("comment-footer-" + rowkey, res.total, res.pageno, res.pagesize, res.totalPage, function (num) {
                        //console.log(num);
                        loadComment(rowkey,num)
                    });
                    $('html,body').animate({
                        scrollTop: $("#" + rowkey).find('.comments').offset().top - $(".topbar").outerHeight(true) - 10
                    })
                } else {

                }
            },
            error: function (err) {

            }
        });
    }

    var inLoadTopic = false;
    var loadOver = false;

    function parseImageList(content) {
        var imgReg = /<img.*?(?:>|\/>)/gi;
        var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
        var arr = content.match(imgReg);
        var imgs = [];
        if (arr != null) {
            for (var i = 0; i < arr.length; i++) {
                var src = arr[i].match(srcReg);
                if (src != null)
                    imgs.push(src[1]);
            }
        }
        return imgs;
    }

    function loadTopicList(tab, addNext) {
        if (inLoadTopic) return;
        inLoadTopic = true;
        addNext = addNext == null ? false : true;


        var orderkey = "top desc,updatetime";
        if (tab == "hot")
            orderkey = "comment";
        $.ajax({
            url: '/topic/list/guest_topic',
            type: "GET",
            async: true,
            dataType: "json",
            data: {pageno: pageno, pagesize: pagesize, orderkey: orderkey},
            success: function (res) {
                var items = res.items;
                if (!addNext) {
                    $("#topicListLayout").empty();
                    topics = [];
                }
                for (var i = 0; i < items.length; i++) {
                    var buf = new StringBuffer();
                    var item = items[i];
                    topics.push(item);
                    item.agreeClick = false;
                    item.opposeClick = false;
                    var ct = new Date(item.createtime);

                    var imgArr = parseImageList(item.content);
                    var div = null;
                    if (imgArr.length > 0) {
                        var html = $("#one-image-item").html();
                        var content = delHtmlTag(item.content);
                        var hasMore = false;
                        if (content.length > 100) {
                            content = content.substring(0, 100) + "&nbsp;&nbsp;...";
                            content += '<span class="content-more" onclick="showMoreContent(this)">阅读全文 </span>';
                            hasMore = true;
                        }else{
                            content += '<span class="content-more" onclick="showMoreContent(this)">阅读全文 </span>'
                        }
                        html = html.replaceAll("#istop", item.top);
                        html = html.replaceAll("#rowkey", item.id);
                        html = html.replaceAll("#subject", delHtmlTag(item.subject));
                        html = html.replaceAll("#agree", item.agree);
                        html = html.replaceAll("#oppose", item.oppose);
                        html = html.replaceAll("#comment", item.comment);
                        html = html.replaceAll("#pushtime", ct.format("yyyy-MM-dd hh:mm"));
                        html = html.replaceAll("#content", content);
                        buf.append(html);
                        div = $(buf.toString());
                        var imgLayout = div.find(".topic-image");
                        imgLayout.append('<table border="0" cellspacing="2" cellpadding="2"><tr>');
                        for (var j = 0; j < imgArr.length; j++) {
                            imgLayout.append('<td><img src="' + imgArr[j] + '"/></td>');
                        }
                        imgLayout.append('</tr></table>');
                        if(content.trim().length==0)
                            div.find(".topic-image-content").hide();

                    } else {
                        var html = $("#topic-item").html();
                        var content = delHtmlTag(item.content);

                        var hasMore = false;
                        if (content.length > 100) {
                            content = content.substring(0, 200) + "&nbsp;&nbsp;...";
                            content += '<span class="content-more" onclick="showMoreContent(this)">阅读全文 </span>';
                            hasMore = true;
                        }
                        html = html.replaceAll("#istop", item.top);
                        html = html.replaceAll("#rowkey", item.id);
                        html = html.replaceAll("#subject", delHtmlTag(item.subject));
                        html = html.replaceAll("#content", content);
                        html = html.replaceAll("#agree", item.agree);
                        html = html.replaceAll("#oppose", item.oppose);
                        html = html.replaceAll("#comment", item.comment);
                        html = html.replaceAll("#pushtime", ct.format("yyyy-MM-dd hh:mm"));
                        buf.append(html);
                        div = $(buf.toString());
                        //loadCommentCount(item.id);
                    }
                    parseContentEntityTags(content, item.id);
                    $("#topicListLayout").append(div);
                    loadContentSentiment(div,item.id,'topic');
                    if (item.top == 100) {
                        div.find('.subject img').show();
                        div.find('div[name="topBox"]').html('<icon class="icon-quxiaozhiding1"></icon>取消置顶');
                    } else {
                        div.find('.subject img').hide();
                    }
                    if (item.color != null && item.color != "") {
                        div.find('.subject').css({
                            color: item.color
                        });
                    }
                    if (!res.admin) {
                        div.find("div[name='topBox']").remove();
                        div.find("div[name='removeBox']").remove();
                    }
                }
                if (items.length == 0) {
                    loadOver = true;
                    $("#topicListLayout").append('<div class="loadOver">-- 我是有底线的 --</div>')
                }

                inLoadTopic = false;
            },
            error: function (err) {
                inLoadTopic = false;
            }
        });
    }

    function loadCommentCount(rowkey) {
        $.ajax({
            url: '/topic/count/guest_comment',
            type: "GET",
            async: true,
            dataType: "json",
            data: {topic: rowkey},
            success: function (res) {
                if (res.errorCode == 0) {
                    $("span[name='comment-count-" + res.topic + "']").html(res.count);
                    getTopic(rowkey).comment = res.count;
                }
            },
            error: function (err) {

            }
        });
    }

    function getTopic(rowkey) {
        for (var i = 0; i < topics.length; i++) {
            var item = topics[i];
            if (item.id == rowkey) {
                return item;
            }
        }
        return null;
    }

    function showMoreContent(obj) {
        var itemDiv = $(obj).parent().parent();
        var rowkey = itemDiv.attr("id");
        var item = getTopic(rowkey);
        itemDiv.find('.topic-content').html(item.content);
        itemDiv.find(".packup").show();
        itemDiv.attr("more", true);
        itemDiv.find('img').css({maxWidth: itemDiv.width() - 20});
        showFloatFooter(rowkey);
        //parseContentEntityTags(item.content, rowkey);
        itemDiv.find(".topic-image").hide();
    }

    function packupContent(rowkey) {
        var item = getTopic(rowkey);
        var itemDiv = $("#" + rowkey);
        var content = delHtmlTag(item.content);
        if (content.length > 100) {
            content = content.substring(0, 100) + "&nbsp;&nbsp;...";
            content += '<span class="content-more" onclick="showMoreContent(this)">阅读全文 </span>';
        }else{
            content += '<span class="content-more" onclick="showMoreContent(this)">阅读全文 </span>';
        }
        itemDiv.find('.topic-content').html(content);
        itemDiv.find(".packup").hide();
        itemDiv.removeAttr("more");
        //parseContentEntityTags(content, rowkey);
        itemDiv.find(".topic-image").show();
    }

    function showFloatFooter(rowkey) {
        var item = getTopic(rowkey);
        var itemDiv = $("#" + rowkey);
        $("#float-footer .footer").css({
            width: itemDiv.width()
        });
        $("#float-footer").show();
        $("#float-footer .footer").attr("topic", rowkey);
        $("#float-agree").html(item.agree);
        $("#float-oppose").html(item.oppose);
        $("#float-comment-count").html(item.comment);
        $("#float-footer .packup").show();
        $("#float-footer .float-subject").html(item.subject);
    }

    function onScroll() {
        var height = document.body.clientHeight;
        var scrollTop = $(window).scrollTop();
        var divs = $(".topic-item");
        for (var i = 0; i < divs.length; i++) {
            var div = $(divs[i]);
            var rowkey = div.attr("id");
            var offsetTop = div.find(".topic-content").offset().top;
            if ((height + scrollTop) > offsetTop) {
                if (div.attr("more") == "true")
                    showFloatFooter(rowkey);
                else
                    $("#float-footer").hide();
            }
        }
        if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
            if (!loadOver) {
                pageno++;
                loadTopicList(currentTab, true);
            }
        }
        if ($(document).scrollTop() >= 500) {
            $(".go-top").fadeIn();
        } else {
            $(".go-top").fadeOut();
        }
    }

    function _agreeTopic() {
        var rowkey = $("#float-footer .footer").attr("topic");
        agreeTopic(rowkey);
    }

    function _opposeTopic() {
        var rowkey = $("#float-footer .footer").attr("topic");
        opposeTopic(rowkey);
    }

    function _packupContent() {
        var rowkey = $("#float-footer .footer").attr("topic");
        packupContent(rowkey);
        $("#float-footer").hide();
    }



    function showComment(rowkey, obj) {
        if ($(obj).attr("show")) {
            $(obj).removeAttr("show");
            $("#comment-" + rowkey).fadeOut();
            $(obj).find(".packup-comment").hide();
            $(obj).find(".comment-count").show();
        } else {
            loadComment(rowkey, 1);
            $(".comment-layout").hide();
            $(".showCommentButton").removeAttr("show");
            $("#comment-" + rowkey).fadeIn();
            $(".showCommentButton .packup-comment").hide();
            $(".showCommentButton .comment-count").show();

            $(obj).attr("show", true);
            $(obj).find(".packup-comment").show();
            $(obj).find(".comment-count").hide();
        }
    }

    function agreeComment(obj) {
        var div = $(obj);
        var agreeClick = div.attr("agreeClick");
        var agree = parseInt(div.attr("agree"));

        if (agreeClick == 'false') {
            div.attr("agreeClick", "true");
            agree++;
            div.attr("agree", agree);
            div.css({
                color: '#0e7efe'
            });
            div.find('span').html(agree);
            updateComment(div.attr("id"), {agree: 'increment'}, false);
        } else {
            updateComment(div.attr("id"), {agree: 'decrement'}, false);
            div.attr("agreeClick", "false");
            agree--;
            div.attr("agree", agree);
            if (agree < 0) agree = 0;
            if (agree == 0)
                div.find('span').html("");
            else
                div.find('span').html(agree);
            div.css({
                color: '#656f85'
            });
        }
    }

    function parseContentEntityTags(content, topic) {
        if(content.trim().length==0) return;
        $.ajax({
            url: '/topic/contentEntityTags',
            type: "POST",
            async: true,
            dataType: "json",
            data: {content: content},
            success: function (res) {
                if (res.errorCode == 0) {
                    var hasEntityTag = false;
                    var tags = "";
                    if (res.name.length > 0) {
                        hasEntityTag = true;
                        for (var i = 0; i < res.name.length; i++) {
                            var key = res.name[i];
                            //content = content.replaceAll(key, '<span class="key-name" onclick="goBaike(this)">' + key + '</span>');
                            tags +='<div class="-tag">'+key+'<div class="-tag-dot"></div></div>';
                        }
                    }

                    if (res.organization.length > 0) {
                        hasEntityTag = true;
                        for (var i = 0; i < res.organization.length; i++) {
                            var key = res.organization[i];
                            //content = content.replaceAll(key, '<span class="key-organization" onclick="goBaike(this)">' + key + '</span>');
                            tags +='<div class="-tag">'+key+'<div class="-tag-dot"></div></div>';
                        }
                    }
                    if (res.place.length > 0) {
                        hasEntityTag = true;
                        for (var i = 0; i < res.place.length; i++) {
                            var key = res.place[i];
                            //content = content.replaceAll(key, '<span class="key-place" onclick="goBaike(this)">' + key + '</span>');
                            tags +='<div class="-tag">'+key+'<div class="-tag-dot"></div></div>';
                        }
                    }
                    var itemDiv = $("#" + topic);
                    if (hasEntityTag) {
                        itemDiv.find('.topic-content').html(content);
                    }
                    if(tags!=""){
                        itemDiv.find('.topic-tag').append('<div class="tag-info">实体：</div>');
                        itemDiv.find('.topic-tag').append('<div>'+tags+'</div>');
                    }else{
                        itemDiv.find('.topic-tag').hide();
                    }
                }
            },
            error: function (err) {

            }
        });
    }

    function openBaikeItem(obj) {
        var item = $(obj).parent().parent().find('.baike-entity-item').text();
        window.open('https://baike.baidu.com/item/' + item);
    }

    function goBaike(obj) {
        event.stopPropagation();
        var item = $(obj).text();
        //window.open('https://baike.baidu.com/item/' + item);
        var layoutWidth = $("#baike-entity").outerWidth(true);
        var layoutHeight = $("#baike-entity").outerHeight(true);
        var x = event.clientX;
        var y = event.clientY + 10 + $(document).scrollTop();
        if ((x + layoutWidth) >= document.body.clientWidth)
            x = x - layoutWidth;
        if ((y + layoutHeight) >= $(document).height())
            y = y - layoutHeight - 20;
        $("#baike-entity").css({
            top: y,
            left: x
        });
        $(".baike-entity-item").html(item);
        $(".baike-entity-item").attr("class", "baike-entity-item " + $(obj).attr("class"));
        $("#baike-entity").fadeIn();
        $(".baike-entity-content").html("正在获取实体说明...");
        $.ajax({
            url: '/topic/parseBaikeContent',
            type: "GET",
            async: true,
            dataType: "json",
            data: {item: item},
            success: function (res) {
                if (res.errorCode == 0) {
                    $(".baike-entity-content").html(res.content);
                } else {
                    $(".baike-entity-content").html('<span style="color:#ff0000">' + res.message + '</span>');
                }
            },
            error: function (err) {

            }
        });
    }

    function closeBaikeEntity() {
        $("#baike-entity").fadeOut();
    }

    loadTopicList();

    function loadContentSentiment(div,key,target){
        div.find(".sentiment").html("-");
        $.ajax({
            url: '/topic/sentiment/guest_topic',
            type: "GET",
            async: true,
            dataType: "json",
            data: {rowkey: key,target:target},
            success: function (res) {
                var sentiment = div.find('.sentiment');
                var sentText = div.find(".sentiment_text");
                if (res.errorCode == 0) {
                    sentiment.html(res.sentiment.toFixed(3));
                    if(res.sentiment==0.0||res.sentiment<0.0005){
                        sentiment.html('-');
                        sentText.html("");
                    }else if(res.sentiment>0.5){
                        sentiment.css("color","#ff0000");
                        sentText.html(" (正面)");
                        sentText.css("color","#ff0000")
                    }else if(res.sentiment<0.5){
                        sentiment.css("color","#009900");
                        sentText.html(" (负面)");
                        sentText.css("color","#009900")
                    }else {
                        sentText.html(" (中立)");
                    }
                }
            },
            error: function (err) {

            }
        });
    }
</script>